<template>
  <div class="map-view">
    <div :id="localUUID" class="maps"></div>
  </div>
</template>
<script>
import { Scene, PointLayer } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import { createUUID } from '@/common/js/mUtils'
// import { post } from '@/api/fetch'

export default {
  name: 'MMap3dbar',
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    ratio: {
      type: Number,
      default: 1
    },
    uuid: String
  },
  data() {
    return {
      localUUID: createUUID(),
      data: [],
      pointLayer: null
    }
  },
  computed: {
    dataTrigger() {
      if (this.props[1].fields[0].value.dataJson.json) {
        const result = this.props[1].fields[0].value.dataJson.json
        let dataobj = '{}'
        try {
          dataobj = JSON.parse(result)
        } catch (e) {
          this.$message.error('JSON格式有误请重试')
          dataobj = {}
        }
        return dataobj
      } else {
        return []
      }
    },
    modelTrigger() {
      return this.props[1].fields[0].value.dataJson.model
    },
    getMapStyle() {
      return this.props[0].fields[3].value[0].value.value
    },
    getZoom() {
      return this.props[0].fields[3].value[1].value.value
    },
    getX() {
      return this.props[0].fields[3].value[2].value.value
    },
    getY() {
      return this.props[0].fields[3].value[3].value.value
    }
    // getpitch() {
    // 	return this.props[0].fields[3].value[4].value.value;
    // },
  },
  watch: {
    dataTrigger(val) {
      if (val && this.scene) {
        this.drawimg()
      }
    },
    modelTrigger(val) {
      if (this.scene) {
        this.drawimg()
      }
    },
    getMapStyle(val) {
      this.scene.setMapStyle(val)
    },
    getZoom(val) {
      this.scene.setZoom(val)
    },
    getX(val) {
      this.scene.setCenter([val, this.getY])
    },
    getY(val) {
      this.scene.setCenter([this.getX, val])
    }
    // getpitch(val) {
    // 	this.scene.setPitch(val);
    // },
  },
  mounted() {
    this.initMap()
  },

  beforeDestroy() {
    clearTimeout(this.timer)
    this.scene && this.scene.destroy()
  },
  methods: {
    setZoom(val) {
      this.props[0].fields[3].value[1].value.value = val
    },
    setX(val) {
      this.props[0].fields[3].value[2].value.value = val
    },
    setY(val) {
      this.props[0].fields[3].value[3].value.value = val
    },
    // setpitch(val) {
    // 	this.props[0].fields[3].value[4].value.value = val;
    // },
    initMap() {
      this.scene && this.scene.destroy()
      const scene = new Scene({
        id: this.localUUID,
        logoVisible: false, // 是否显示logo
        map: new GaodeMap({
          pitch: 45,
          center: [this.getX, this.getY], // 地图初始中心经纬度 {Lnglat}
          style: this.getMapStyle, // 简化地图样式设置，dark,light,normal,blank 无底图
          zoom: this.getZoom, // 地图初始显示级别 {number} Mapbox （0-24） 高德 （2-19）
          rotation: 0,
          minZoom: 2, // 最小缩放等级
          maxZoom: 15 // 最大缩放等级
        })
      })
      scene.on('loaded', () => {
        scene.on('moveend', () => {
          const pos = this.scene.getCenter()
          this.setX(pos.lng)
          this.setY(pos.lat)
        })
        scene.on('zoomend', () => {
          setTimeout(() => {
            this.setZoom(scene.getZoom() + 1)
          }, 1000)
        })
      })
      this.scene = scene
      this.drawimg()
    },
    drawimg() {
      let pointLayer = this.pointLayer
      if (pointLayer) {
        // PointLayer && pointLayer.remove();
      } else {
        pointLayer = new PointLayer()
        this.pointLayer = pointLayer
      }
      pointLayer
        .source(this.dataTrigger, {
          parser: {
            type: 'json',
            x: 'location_x',
            y: 'location_y'
          }
        })
        .active(true)
        .shape('name', ['cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'])
        .size('value', h => {
          return [6, 6, h / 0.2]
        })
        .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
        .style({
          opacity: 1.0
        })
      this.pointLayer = pointLayer
      this.scene.addLayer(pointLayer)
    }
  }
}
</script>
<style lang="stylus" scoped>
.map-view
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    position: relative;
    margin: 10px;
.maps
    width 100%
    height 100%
</style>
